import React, {Component} from 'react';
import styles from './index.module.css'
class Strick extends Component {
     content = React.createRef();
     pla = React.createRef();
     componentDidMount() {
         window.addEventListener('scroll',this.scroll)
     }
     componentWillUnmount() {
         window.removeEventListener('scroll',this.scroll)
     }

    scroll = () =>{
        const pla = this.pla.current;
        const content = this.content.current;
        const {top} = pla.getBoundingClientRect();
        if(top < 0){
            content.classList.add(styles.fixed);
            pla.style.height = '40px'
        }else {
            content.classList.remove(styles.fixed);
            pla.style.height = '0px'
        }
    };

    render() {

        return (
            <div>
                {/*占位符*/}
                <div ref={this.pla}/>
                {/*内容区域*/}
                <div ref={this.content}>{this.props.children}</div>
            </div>
        );
    }
}

export default Strick;
